<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册账户</title>
<!--    样式区域-->
    <style>
        div{
            margin: 0 auto;
            width: 80rem;
            height: 30rem;
            background-color: #ddd;
        }
        table{
            border-collapse: collapse;
            width: 100%;
        }
        table tr{
            height: 2rem;
        }
        table td{
            /*width: 50%;*/
        }
        .errorSpan{
            color: red;
            font-size: 14px;
            font-family: '幼圆', sans-serif;
        }
    </style>
<!--    JS区域-->
    <script type="text/javascript">
            let regular_username = /^2022\d{4,}$/;      //2022开头，至少8位的数字
            let regular_password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,10}$/;   //强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在6-10之间)

            function checkInfo(index) {
                let username = document.getElementById("username").value;
                let password = document.getElementById("password").value;
                switch (index){
                    case 1:
                        if (username.length === 0){
                            document.getElementById("errorUsername").innerText = "用户名不可为空！";
                            return false;
                        }else if (regular_username.test(username)){
                            document.getElementById("errorUsername").innerHTML = "<span style='color: #2502ff'>用户名可用！</span>";
                            return true;
                        }else {
                            document.getElementById("errorUsername").innerText = "用户名不合法！";
                            return false;
                        }
                    case 2:
                        if (password.length === 0){
                            document.getElementById("errorPassword").innerText = "密码不可为空！";
                            return false;
                        }else if (regular_password.test(password)){
                            document.getElementById("errorPassword").innerHTML = "<span style='color: #2502ff'>密码可用！</span>";
                            return true;
                        }else {
                            document.getElementById("errorPassword").innerText = "密码不合法！";
                            return false;
                        }
                }
            }

            function registerNew(){
                if (this.checkInfo(1) === this.checkInfo(2) && this.checkInfo(1) === true){
                    // document.getElementById("form_register").onsubmit;
                    return false;
                }
            }

            function setNew() {
                let p1 = document.getElementsByTagName("p");
                // console.info(p1[0].textContent);
                p1[0].setAttribute("style","color:red; font-size: 28px;")
                p1[1].setAttribute("style","color:blue; font-size: 32px;")
            }
            function resetNew() {
                let p1 = document.getElementsByTagName("p");
                // console.info(p1[0].textContent);
                p1[0].setAttribute("style"," ")
                p1[1].setAttribute("style"," ")
            }
    </script>
</head>
<body>
<div id="div_123">
    <form action="first.html" method="get" id="form_register" onsubmit="registerNew();">
        <table>
            <tr>
                <td>username:</td>
                <td>
                    <label><input type="text" id="username" onblur="checkInfo(1)"></label>
                    <span id="errorUsername" class="errorSpan"></span>
                </td>
            </tr>
            <tr>
                <td>password:</td>
                <td>
                    <label><input type="password" id="password" onblur="checkInfo(2)"></label>
                    <span id="errorPassword" class="errorSpan"></span>
                </td>
            </tr>
            <tr>
                <td style="text-align: center">
                    <label><input type="submit"  value="注册用户"></label>
                </td>
                <td style="text-align: center">
                    <label><input type="reset" onclick="setNew();"  value="放大字体"></label>
                </td>
                <td style="text-align: center">
                    <label><input type="reset" onclick="resetNew();"  value="重置字体"></label>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: left">
                    <p>2022开头，至少8位的数字</p>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: left">
                    <p>强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在6-10之间)</p>
                </td>
            </tr>
        </table>
    </form>
    <p id="removeP">我是P标签，我被移除了。</p>
</div>
<hr/>
</body>
<script type="text/javascript">
    let newSpan = document.createElement("span");   //窗机哪一个新span元素
    newSpan.innerText = "我是新添加的span元素，不会影响父节点原有的元素。";
    newSpan.style.color = "red";
    newSpan.style.fontSize = "2rem";
    div_all = document.getElementById("div_123");
    div_all.appendChild(newSpan);
    div_all.removeChild(document.getElementById("removeP"));

</script>
</html>